<template>
	<view class="content">
		<view class="content_top">
			<image class="background-image" src="../../static/img/bg.png"></image>
			<view class="content_top_box">
				<view class="content_top_box_search">
					<view class="content_top_box_searchs">
						<tn-input :placeholderStyle="{ fontFamily: 'PingFang SC', fontWeight: '500',  fontSize: '24rpx', color: '#999999', textIndent: '100rpx' ,textIndent:'30rpx'
  }" placeholder="请输入分建工程名称" :customStyle="{ paddingLeft: '35rpx' }" v-model="value" @confirm="searchs()" />
					</view>
					<view class="content_top_box_search_btn" @click="searchs()">
						<image src="../../static/img/search.png"  style="width: 164rpx;height: 84rpx;"></image>
					</view>
				</view>

			</view>
		</view>
		<view class="content_bottom">
			<view class="content_bottom_box">
				<view class="content_bottom_box_list" @click="toteamPerson(item)" v-for="(item,index) in list"
					:key="index">
					<view class="content_bottom_box_list_qcord" @click.stop="openshow(item)">
						<image src="../../static/img/rightqcrod.png" mode="widthFix" style="width: 84rpx;"></image>
					</view>
					<view class="content_bottom_box_list_title">
							分建工程名称：{{item.SUBPACKAGE_PROJECT_NAME}}
					</view>
					<view class="content_bottom_box_list_two">
						<view class="content_bottom_box_list_two_left">
					
						</view>
						<!-- 	<view  class="content_bottom_box_list_two_right"  style="background-image: url('../../static/img/circlebak.png'); background-size: cover;">
							人员信息
						</view> -->
					</view>

				</view>
			</view>
			<tn-popup zIndex="98999" v-model="qcordshow" borderRadius="50" mode="center" width="600rpx" height="728rpx">
				<view class="contentpopur">

					<view class="contentpopur_qcord">
						<wxy-code size="400" ref='qrcode' :val="code"></wxy-code>
						<!-- 							<image src="../../static/img/ erweima .png" mode="widthFix" style="width: 400rpx;"></image> -->
					</view>
					<view class="contentpopur_xmName">
						项目名称：{{xmname}}
					</view>
					<view class="contentpopur_dept">
						分建工程名称：{{fjname}}
					</view>


				</view>
			</tn-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				qcordshow: false,
				list: [],
				qcrod: '',
				xmname: '',
				fjname: '',
				val: '222',
				code:'',
				projectNo:''
				
			}
		},
		onLoad(options) {
			if (options && options.projectNo) {
				this.projectNo = options.projectNo;
			
				// 在这里可以对接收到的数据进行处理
				this.teamList();
			}

		},
		mounted() {

			this.teamList();
			// 在页面加载完成后调用 uni.hideTabBar() 方法来隐藏分包管理人员的 tabBar
			// uni.hideTabBar({
			//   animation: true, // 可选，是否需要动画效果，默认为 true
			//   success: function() {
			//     console.log('成功隐藏分包管理人员的 tabBar');
			//   },
			//   fail: function(err) {
			//     console.error('隐藏分包管理人员的 tabBar 失败：', err);
			//   }
			// });
		},
		methods: {
			searchs(){
				console.log('5555')
				this.teamList();
			},
			openshow(item) {
				console.log(item,'item')
				this.fjname = item.SUBPACKAGE_PROJECT_NAME;
				this.xmname = item.BIDDING_PROJECT_NAME;
				this.code=item.BUYING_TASK_NO + '@@';
				console.log(this.code,'this.code')
				this.$nextTick(() => {
					this.$refs.qrcode.makeCode();
				});
				this.qcordshow = true;
			},
			 toteamPerson(item) {

				uni.navigateTo({
					url: '../../pages/teamperson/teamperson?projectNo='+item.PROJECT_NO
				});
			},

			async teamList() {
				try {
					const url = '/portal/r/w'; // 替换为你的 API 地址
					const params = {
						// 构造你的请求参数
						cmd: 'com.awspaas.user.apps.sfeg.srm.supplier.subcontracting.project',
						sid:uni.getStorageSync('SID'),
						phoneNumber: uni.getStorageSync('phoneNumber'),
						openId: uni.getStorageSync('OPEN_ID'),
						value:this.value,
						projectNo:this.projectNo
					};

					// 发送 GET 请求
					const response = await this.$get(url, params);
					if(response.result=='ok'){
									this.list = response.data;
					}else{
						this.list = [];
					}
			
					// 处理请求成功的逻辑
					console.log('请求成功', response);
				} catch (error) {
					// 处理请求失败的逻辑
					console.error('请求失败', error);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		/* 占据整个视口高度 */
		display: flex;
		flex-direction: column;
		position: relative;
		/* 相对定位，以便子元素可以相对于它定位 */
	}

	.content_top {

		position: relative;
		/* 设置相对定位，以便子元素可以相对于它定位 */
		width: 100%;
		/* 宽度百分之百 */
		height: 500rpx;
		/* 设置高度 */
		overflow: hidden;

		/* 触发 BFC */
		.background-image {
			position: absolute;
			/* 设置绝对定位，让背景图充满整个父容器 */
			top: 0;
			left: 0;
			width: 100%;
			/* 宽度百分之百 */
			height: 100%;
			/* 高度百分之百 */
			object-fit: cover;
			/* 图片填充父容器 */
			z-index: -1;
			/* 将背景图放到底层 */
		}

		.content_top_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 64rpx 35rpx 0 35rpx;
			position: relative;

			.content_top_box_search {
				width: 87%;
				position: relative;
				height: 68rpx;
				background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 51%, #FFFFFF 100%);
				border-radius: 36rpx;

				.content_top_box_search {
					text-indent: 50rpx;
					width: 80%;
					position: relative;
					height: 67rpx;

				}

				.tn-input__input {
					text-indent: 47rpx !important;
				}

			}

			.content_top_box_search_btn {
				position: absolute;
				top: -7rpx;
				right: -96rpx;
				/* height: 72rpx; */
				z-index: 89999;
			}
		}
	}

	.content_bottom {
		flex: 1;
		/* 自动填充剩余空间 */
		position: absolute;
		/* 绝对定位，覆盖在 .content_top 上方 */
		top: 200rpx;
		/* 位于父容器顶部下方 200rpx 处 */
		width: 100%;
		/* 宽度百分之百 */
		height: calc(100% - 200rpx);
		/* 高度占满父容器下方 */
		background-color: #F8F9FD;
		/* 背景色，可根据需要修改 */
		z-index: 0;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		/* 确保在 content_top 之下 */
		// display: flex;
		// justify-content: center;
		// align-items: center;

		.content_bottom_box {
			margin: 34rpx;

			.content_bottom_box_list {
				margin-top: 12rpx;
				padding: 28rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 7rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
				border-radius: 16rpx;
				position: relative;

				.content_bottom_box_list_qcord {
					position: absolute;
					right: 1rpx;
					top: 1rpx;

				}

				.content_bottom_box_list_title {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #3A3A3A;
					width: 70%;
				}

				.content_bottom_box_list_two {
					display: flex;
					justify-content: space-between;
					margin-top: 34rpx;

					.content_bottom_box_list_two_left {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						flex: 0 0 67%;
					}

					.content_bottom_box_list_two_right {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #3C83FD;
						width: 128rpx;
						height: 42rpx;
						text-align: center;
						line-height: 42rpx;
					}
				}

			}
		}





	}

	.contentpopur {
		.contentpopur_qcord {
			text-align: center;
			margin: 80rpx;
		}

		.contentpopur_xmName {
			text-align: center;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #3A3A3A;
			margin: 0 30rpx;
		}

		.contentpopur_dept {
			text-align: center;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			margin: 34rpx 33rpx 0 33rpx;
		}
	}
</style>